<template>
  <div class="player-container">
    <div class="song-info">
      <img :src="currentSong.cover" alt="cover" class="cover" />
      <div class="info">
        <div class="name">{{ currentSong.name }}</div>
        <div class="artist">{{ currentSong.artist }}</div>
      </div>
    </div>
    
    <div class="player-controls">
      <div class="control-buttons">
        <el-button circle :icon="Shuffle" size="small" />
        <el-button circle :icon="CaretLeft" size="large" @click="prevSong" />
        <el-button 
          circle 
          :icon="isPlaying ? VideoPause : VideoPlay" 
          size="large"
          @click="togglePlay"
        />
        <el-button circle :icon="CaretRight" size="large" @click="nextSong" />
        <el-button circle :icon="Refresh" size="small" />
      </div>
      
      <div class="progress-container">
        <span class="time">{{ formatTime(currentTime) }}</span>
        <el-slider 
          v-model="progress" 
          :max="duration"
          @change="seekTo"
          class="progress-slider"
        />
        <span class="time">{{ formatTime(duration) }}</span>
      </div>
    </div>
    
    <div class="volume-controls">
      <el-icon :size="20"><Headset /></el-icon>
      <el-slider 
        v-model="volume" 
        :max="100"
        class="volume-slider"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  VideoPlay, 
  VideoPause, 
  CaretLeft, 
  CaretRight, 
  Shuffle, 
  Refresh,
  Headset
} from '@element-plus/icons-vue'

const currentSong = ref({
  name: '未播放歌曲',
  artist: '未知歌手',
  cover: 'https://via.placeholder.com/60x60'
})

const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(180)
const volume = ref(50)
const progress = computed(() => (currentTime.value / duration.value) * 100)

const togglePlay = () => {
  isPlaying.value = !isPlaying.value
}

const prevSong = () => {
  console.log('上一首')
}

const nextSong = () => {
  console.log('下一首')
}

const seekTo = (value: number) => {
  currentTime.value = (value / 100) * duration
}

const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.player-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
}

.song-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.cover {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.artist {
  font-size: 12px;
  color: #909399;
}

.player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 500px;
}

.control-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 5px;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.time {
  font-size: 12px;
  color: #909399;
  min-width: 40px;
}

.progress-slider {
  flex: 1;
}

.volume-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}

.volume-slider {
  width: 80px;
}
</style>
